<template>
    <div class="dashboard-container">
      <!-- 第一行布局 -->
      <div class="first-row">
        <!-- 左侧图表 -->
        <div class="chart-card left-chart">
          <h3 class="chart-title">近7天预约趋势</h3>
          <div ref="appointmentsChartRef" class="chart compact"></div>
        </div>
  
        <!-- 中间指标和汇总 -->
        <div class="center-stats">
          <!-- 指标卡片 -->
          <div class="card-group">
            <div class="metric-card">
              <h3>今日就诊人数</h3>
              <div class="value">{{ data.realTime.todayVisits }}</div>
            </div>
            <div class="metric-card">
              <h3>值班医生数</h3>
              <div class="value">{{ data.realTime.onDutyDoctors }}</div>
            </div>
            <div class="metric-card">
              <h3>库存预警药品</h3>
              <div class="value">{{ data.realTime.stockAlerts }}</div>
            </div>
            <div class="metric-card">
              <h3>待处理订单</h3>
              <div class="value">{{ data.status.pendingOrders }}</div>
            </div>
          </div>
  
          <!-- 数据汇总 -->
          <div class="summary-grid">
            <div class="summary-item">
              <h3>累计数据</h3>
              <p>月就诊人数：{{ data.cumulative.monthlyVisits }}</p>
              <p>注册患者总数：{{ data.cumulative.registeredPatients }}</p>
            </div>
            <div class="summary-item">
              <h3>服务状态</h3>
              <p>平均响应时间：{{ data.status.avgResponseTime }}</p>
            </div>
          </div>
        </div>
  
        <!-- 右侧图表 -->
        <div class="chart-card right-chart">
          <h3 class="chart-title">本周药品销售TOP5</h3>
          <div ref="drugSalesChartRef" class="chart compact"></div>
        </div>
      </div>
  
      <!-- 第二行布局 -->
      <div class="second-row">
        
        <div class="chart-card">
          <h3 class="chart-title">近7天药品入库量</h3>
          <div ref="inboundChartRef" class="chart compact"></div>
        </div>
        <div class="chart-card">
          <h3 class="chart-title">本月药品销售分布</h3>
          <div ref="monthlySalesChartRef" class="chart compact"></div>
        </div>
        <div class="chart-card">
          <h3 class="chart-title">近7天在线问诊</h3>
          <div ref="consultChartRef" class="chart compact"></div>
        </div>
      </div>
    </div>
  </template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const data = ref({
    realTime: {
        todayVisits: 142,
        onDutyDoctors: 8,
        stockAlerts: 23
    },
    cumulative: {
        monthlyVisits: 3245,
        registeredPatients: 15689
    },
    trends: {
        appointments: [45, 52, 48, 67, 62, 70, 65],
        drugInbounds: [120, 135, 142, 128, 150, 165, 158],
        onlineConsults: [30, 45, 50, 40, 55, 60, 50],
        drugSales: [
            { name: '阿莫西林', weekly: 120, monthly: 450 },
            { name: '布洛芬', weekly: 95, monthly: 380 },
            { name: '维生素C', weekly: 80, monthly: 320 },
            { name: '头孢克肟', weekly: 65, monthly: 280 },
            { name: '奥美拉唑', weekly: 45, monthly: 210 }
        ]
    },
    status: {
        pendingOrders: 12,
        avgResponseTime: '2.1分钟'
    }
})

const initChart = (element, option) => {
    const chart = echarts.init(element)
    chart.setOption({
        textStyle: {
            fontFamily: 'Arial, sans-serif',
            color: '#666'
        },
        grid: {
            containLabel: true,
            left: '3%',
            right: '3%',
            bottom: '10%'
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.8)',
            borderWidth: 0,
            textStyle: {
                color: '#fff'
            }
        },
        ...option
    })
    return chart
}

const appointmentsChartRef = ref(null)
const inboundChartRef = ref(null)
const consultChartRef = ref(null)
const drugSalesChartRef = ref(null)
const monthlySalesChartRef = ref(null)

onMounted(() => {
    // 预约趋势
    initChart(appointmentsChartRef.value, {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { type: 'value' },
        series: [{
            data: data.value.trends.appointments,
            type: 'line',
            smooth: true,
            areaStyle: {},
            color: '#409EFF'
        }]
    })

    // 药品入库
    initChart(inboundChartRef.value, {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { type: 'value' },
        series: [{
            data: data.value.trends.drugInbounds,
            type: 'bar',
            barWidth: '60%',
            color: '#67C23A'
        }]
    })

    // 在线问诊
    initChart(consultChartRef.value, {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { type: 'value' },
        series: [{
            data: data.value.trends.onlineConsults,
            type: 'line',
            smooth: true,
            areaStyle: {},
            color: '#E6A23C'
        }]
    })

    // 药品销售TOP5
    initChart(drugSalesChartRef.value, {
        dataset: {
            source: data.value.trends.drugSales
                .sort((a, b) => b.weekly - a.weekly)
                .slice(0, 5)
                .map(item => ({ 药品: item.name, 销量: item.weekly }))
        },
        xAxis: { type: 'value' },
        yAxis: { type: 'category' },
        series: [{
            type: 'bar',
            encode: { x: '销量', y: '药品' },
            color: '#F56C6C'
        }]
    })

    // 月度销售分布
    initChart(monthlySalesChartRef.value, {
        tooltip: { trigger: 'item' },
        series: [{
            type: 'pie',
            radius: ['40%', '60%'],
            data: data.value.trends.drugSales.map(item => ({
                name: item.name,
                value: item.monthly
            })),
            itemStyle: {
                borderRadius: 5,
                borderColor: '#fff',
                borderWidth: 2
            },
            color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
        }]
    })
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 第一行布局 */
.first-row {
  display: grid;
  grid-template-columns: 1fr 340px 1fr;
  gap: 16px;
  min-height: 280px;
}

/* 通用卡片样式 */
.chart-card, .metric-card, .summary-item {
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}

/* 指标卡片 */
.card-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.metric-card {
  background: linear-gradient(145deg, #f7fafd 0%, #e8f2fb 100%);
  border: 1px solid #e1ecf7;
  padding: 6px 10px; /* 减少内边距 */
  min-height: 60px; /* 降低最小高度 */
}

.metric-card h3 {
  color: #409EFF; /* 主蓝 */
  font-weight: 600;
  letter-spacing: 0.5px;
}

.metric-card .value {
  color: #1a73e8; /* 深科技蓝 */
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(25, 118, 210, 0.1);
}

/* 添加动态效果 */
.metric-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
}

/* 数据汇总 */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.summary-item {
  padding: 14px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(145deg, #f8fafb 0%, #f0f3f5 100%);
}

.summary-item h3 {
  color: #1a73e8;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.summary-item p {
  color: #1a73e8;
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.4;
}

/* 图表容器 */
.chart-card {
  position: relative;
}

.chart-title {
  color: #2c3e50;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 2px solid #409EFF;
}

.chart.compact {
  height: calc(100% - 34px); /* 根据标题高度调整 */
}

/* 第二行布局 */
.second-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  min-height: 280px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .first-row {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .chart-card {
    height: 300px;
  }

  .second-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 12px;
    gap: 16px;
  }

  .card-group, .summary-grid {
    grid-template-columns: 1fr;
  }

  .metric-card, .summary-item {
    min-height: 75px;
    padding: 12px;
  }

  .chart.compact {
    height: 240px;
  }

  .chart-title {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .metric-card .value {
    font-size: 16px;
  }
  
  .summary-item p {
    font-size: 11px;
  }
}
</style>